<template>
  <div>
    <el-row>
      <el-form :inline="true">
        <el-form-item label="FM名称">
          <el-input v-model="queryInfo.name" placeholder="请输入FM名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryList1" clearable>搜索</el-button>
          <el-button type="primary" @click="toAddFm">新增FM</el-button>


          <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancle" width="80%">
            <el-form :model="fms" inline="true">
              <el-form-item label="fm名称" label-width="120px">
                <el-input placeholder="请输入fm名称" v-model="fms.name"></el-input>
              </el-form-item>
          
              <br>
              <br>
              <el-form-item label="图像上传" label-width="120px">
                <el-upload action="http://10.10.18.137:8888/sfzy/upload" list-type="picture-card" :file-list="fileList"
                  :on-success="handleSuccess" :limit="1" :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </el-form-item>
              <br>
              <br>
              <el-form-item label="FM音频上传" label-width="120px">
                <el-upload
                  class="upload-demo"
                  action="http://10.10.18.137:8888/sfzy/upload"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  multiple
                  :limit="1"
                  :on-exceed="handleExceed"
                  :file-list="musicList">
                  <el-button size="medium" type="primary">点击上传音频</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传mp3文件，且不超过35mb</div>
                </el-upload>
              </el-form-item>
            </el-form>
          
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancle">取 消</el-button>
              <el-button type="primary" @click="addFm">确 定</el-button>
            </div>
          </el-dialog>
          


        </el-form-item>
      </el-form>
    </el-row>

    <el-table :data="fmList" style="width: 100%" max-height="400rpx">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="FM频道名称" width="200"></el-table-column>
      <el-table-column prop="music" label="音乐媒体路径" width="235"></el-table-column>
    


      <el-table-column prop="img" label="fm图片">
        <template slot-scope='scope'>
          <el-image style="width: 100px; height: 100px"
            :src="'http://10.10.18.137:8888/sfzy/downLoad?filename='+scope.row.img"></el-image>
        </template>
      </el-table-column>


      <el-table-column fixed="right" label="操作" width="265">
        <template slot-scope="scope">
          <el-button @click="toEditFm(scope.row)" type="text" size="small">编辑</el-button>
          <el-link @click="deleteRow(scope.row.id)">移除</el-link>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="queryInfo.pageNum" :page-sizes="[2, 6, 8, 10]" :page-size="queryInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>


<script>
  export default {
    mounted() {
      this.queryList();
    },
    methods: {
      toEditFm(row) {
        this.fms = row;
        // 设置标题
        this.title = "修改";

        this.dialogFormVisible = true;

        this.fileList = [{
          name: row.img,
          url: 'http://10.10.18.137:8888/sfzy/downLoad?filename=' + row.img
        }];

        this.musicList = [{
          name: row.img,
          url: 'http://10.10.18.137:8888/sfzy/downLoad?filename=' + row.music
        }];
      },
      handleSizeChange(size) {
        this.queryInfo.pageSize = size;
        this.queryList();
      },
      handleCurrentChange(num) {
        this.queryInfo.pageNum = num;
        this.queryList();
      },
      queryList() {
        this.$http.get('http://10.10.18.137:8888/sfzy/fm/selectAll', {
          params: this.queryInfo,
        }).then(resp => {
          if (resp.data.status == 200) {
            this.fmList = resp.data.data.list;
            this.total = resp.data.data.total;
          } else {
            this.$message.error('查询失败！');
          }
        });
      },

      queryList1() {
        this.queryInfo.pageNum = 1;
        this.queryList();
      },



      toAddFm() {
        this.title = "新增FM";
        this.dialogFormVisible = true;
      },


      //删除// 删除方法
      deleteRow(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.get('http://10.10.18.137:8888/sfzy/fm/delete?id=' + id)
            .then(resp => {
              if (resp.data.status === 200) {
                this.$message.success(resp.data.message);
                // 重新获取列表数据
                this.queryList();
              } else {
                this.$message.error(resp.data.message);
              }
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },


      handleSuccess(response) {

        this.fms.img = response.message;
      },

      
      handleSuccess1(response) {
      this.fms.music = response.message;
},
      // 删除图片的事件
      handleRemove(file, fileList) {
        console.log(file, fileList);
        // 移除数据
        this.fms.img = '';
      },

      handleRemove1(file, musicList) {
        console.log(file, musicList);
        // 移除数据
        this.fms.music = '';
      },
      // 预览图片事件
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },

      handlePictureCardPreview1(file) {
        this.dialogMusicUrl = file.url;
        this.dialogVisible = true;
      },


      addFm() {
        if (this.fms.id) { // 有值为true  修改
          this.$http.put("http://10.10.18.137:8888/sfzy/fm/update", this.fms)
            .then(resp => {
              if (resp.data.status == 200) {
                // 消息提示
                this.$message.success('修改成功！');
                // 清空数据
                this.fms = { // 对象
                  "id": '',
                  "name": "",
                  "music": "",
                  "img": "",
                }

                this.dialogFormVisible = false;
                // 重新查询
                this.queryList()
              } else {
                this.$message.error('接口异常！')
              }
            })

        } else {
          this.$http.post("http://10.10.18.137:8888/sfzy/fm/insert", this.fms)
            .then(resp => {
              if (resp.data.status == 200) {
                // 消息提示
                this.$message.success('添加成功！');
                // 清空数据
                this.fms = { // FM对象
                  "id": '',
                  "name": "",
                  "music": "",
                  "img": ""
                }
                // 关闭对话框
                this.dialogFormVisible = false;
                // 重新查询
                this.queryList()
              } else {
                this.$message.error('接口异常！')
              }
              this.fileList = []
            })
        }
      },


      cancle() {
        this.dialogFormVisible = false;
        this.fms = { // FM对象
          "id": '',
          "name": "",
          "img": "",
          "music": "",

        }
        this.fileList = []
      },
      batchDelete() {
        // 批量删除逻辑
        this.$message.info('批量删除功能待实现');
      }
    },
    data() {
      return {
        //新增和修改的数据
        title: '', // 对话框标题
        dialogFormVisible: false, // 是否显示对话框
        fms: { // FM对象
          "id": '',
          "name": "",
          "music": "",
          "img": ""
        },
        fileList: [],
        musicList:[],
        dialogImageUrl: '', // 预览图片路径
        dialogVisible: false, // 预览图片的对话框
        dialogMusicUrl:'',//音乐媒体路径
        queryInfo: {
          id: '',
          name: '',
          music: '',
          img: '',
          pageNum: 1,
          pageSize: 2,
        },
        total: 0,
        fmList: [],
      };
    }
  }
</script>

<style>

</style>